<template>
    <el-popover ref="module-h5Header" class="module-h5Header" placement="right" :offset="280" width="520" trigger="click">
        <div class="setting-container-header">
            <header>页面基本设置</header>
            <section>
                <el-form-item label="活动标题:" prop="name" :rules="commonRules.notNullRule">
                    <el-input v-model="formData.name" placeholder="填写页面标题，不超过10字" maxLength="10"></el-input>
                </el-form-item>
                <el-form-item label="活动时间:" prop="timeRange" :rules="commonRules.notNullRule">
                    <el-date-picker
                            v-model="formData.timeRange"
                            type="datetimerange"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="标题设置:" prop="tempData.titleShow">
                  <el-radio v-model="formData.tempData.isHide" :label="false">显示页面标题</el-radio>
                  <el-radio v-model="formData.tempData.isHide" :label="true">不显示页面标题</el-radio>
                </el-form-item>
                <el-form-item label="页面背景颜色:" prop="tempData.background">
                    <el-color-picker v-model="formData.tempData.background"></el-color-picker>
                </el-form-item>
                <el-form-item label="页面背景图片:" prop="tempData.background_image">
                    <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :before-upload="beforeUpload"
                            :on-success="uploadSuccess">
                        <img v-if="formData.tempData.background_image" :src="formData.tempData.background_image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-button type="text" @click="formData.tempData.background_image=''">移除背景图</el-button>
                </el-form-item>
                <el-form-item label="分享封面:" prop="tempData.share_icon">
                    <el-upload
                            class="avatar-uploader"
                            accept="image/*"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :before-upload="beforeUpload"
                            :on-success="uploadIconSuccess">
                        <img v-if="formData.tempData.share_icon" :src="formData.tempData.share_icon" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="分享标题:" prop="tempData.description">
                    <el-input v-model="formData.tempData.share_title" placeholder="用户通过微信分享给用户时，会自动显示页面标题" :rows="3" resize="none" maxLength="1000"></el-input>
                </el-form-item>
                <el-form-item label="页面描述:" prop="tempData.description">
                    <el-input type="textarea" v-model="formData.tempData.description" placeholder="用户通过微信分享给用户时，会自动显示页面描述" :rows="3" resize="none" maxLength="1000"></el-input>
                </el-form-item>
                <el-form-item label="是否启用:" prop="status">
                    <el-switch
                            v-model="formData.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>
            </section>
        </div>
        <header slot="reference" id="h5Header">{{formData.name}}</header>
    </el-popover>
</template>
<script>
    export default {
      name: 'H5Header',
      props: {
        formData: {
          type: Object,
          default: {}
        }
      },
      methods: {
        uploadSuccess(res) {
          this.formData.tempData.background_image = this.replaceImgUrl(res.filePath);
        },
        uploadIconSuccess(res) {
          this.formData.tempData.share_icon = this.replaceImgUrl(res.filePath);
        }
      }
    }
</script>
<style lang="scss">
    @import "../../../../styles/mixin";
    .avatar-uploader .el-upload,
    .upload-img-list li,
    .upload-img-list .upload-btn{
        width: 80px;
        height: 80px;
        line-height: 78px;
    }
    .setting-container-header{
        header{
            @include flex;
            @include a-center;
            border-bottom: 1px solid #efefef;
            padding-bottom: 6px;
        }
        section{
            margin-top: 24px;
            margin-right: 24px;
            .el-input,
            .el-textarea,
            .el-select,
            .el-date-editor{
                width: 100%;
            }

            .el-textarea .el-textarea__inner {
                height: auto;
            }
        }
        .add-container{
            text-align: center;
            padding-top: 12px;
        }
    }
</style>
